/**
 * vue插件：封装全局指令
 */
import { useIntersectionObserver } from '@vueuse/core'
// 默认图片
import Load from '@/assets/images/load.gif'
export default {
  install (app) {
    // 测试
    /**
      * 作用：操作DOM
      * 语法：app.directive('指令名', {   mounted() {// 在绑定元素的父组件挂载之后调用}, })
      */
    app.directive('border', {
      // 在绑定元素的父组件挂载之后调用
      /**
        *
        * @param {*} el 绑定指令的元素的dom对象
        * @param {*} bind 获取指令绑定的变量值
        */
      mounted (el, bind) {
        // console.log('指令执行：', el, bind)
        // 如果指令没有绑定变量：bind.value = undefined
        el.style.border = `2px solid ${bind.value || 'red'}`
      }
    })

    /**
      * 图片懒加载指令
      */
    app.directive('imgLazy', {
      /**
        *
        * @param {*} el img的dom对象
        * @param {*} bind 获取图片地址
        */
      mounted (el, bind) {
        /**
          * 图片懒加载实现：
          * 没有懒加载：
          * <img :src="item.picture" alt="" />
          * 直接把后台的图片地址赋值给src，浏览器会立即下载并渲染
          * 懒加载：
          *  <img v-imgLazy="item.picture" alt="" />
          *  核心：判断el元素是否进入可视区？
          *       进入了：el.src = bind.value => 浏览器会立即下载并渲染
          */
        const { stop } = useIntersectionObserver(
          el, // 监控目标元素
          ([{ isIntersecting }]) => {
            if (isIntersecting) {
              // 图片进入可视区了
              // 默认先显示loading图片
              el.src = Load

              setTimeout(() => {
                // 延迟300ms 下载并渲染图片
                el.src = bind.value
              }, 300)

              el.onerror = () => {
                // 图片加载失败
                el.src = Load
              }
              // 关闭监控
              stop()
            }
          }
        )
      }
    })
  }
}
